<template>
    <div class="bigbox" @click="handleclick(props.data)">
        <Aimage :src="props.data.logolinks" :number="props.data.number" />
        <div class="list">
            <div class="list-content">
                <div class="top">
                    <h4>
                        {{
                            store.$state.locale == 1
                                ? props.data.title.split(';')[0]
                                : props.data.title.split(';')[1]
                        }}
                    </h4>
                    <el-icon class="icon1" @click="cardDetail" style="margin-top: 4px">
                        <ArrowUp v-if="expand" />
                        <ArrowDown v-else />
                    </el-icon>
                </div>
                <h4>{{ props.data.number }}</h4>
                <div v-if="expand" class="details">
                    <h5 v-for="(item, index) in detailsItem33" :key="index">
                        <span>{{ item.name }}</span>
                        <el-icon class="icon1" v-if="item.icon">
                            <Check v-if="item.icon == 1" />
                            <img
                                v-if="item.icon == 2"
                                src="@/assets/1x/1x/source9.png"
                                class="icon"
                            />
                        </el-icon>
                    </h5>
                </div>
                <h5
                    v-else
                    :style="{
                        color:
                            props.data.status == '80' || props.data.status == '90' ? '#FF6666' : '',
                    }"
                >
                    {{ code33 }}
                </h5>
                <h4>{{ props.data.tradeCurrency }} {{ props.data.HKD }}</h4>
                <h6>
                    {{
                        props.data.price
                            ? $t(i18n.global.t('home.finalofferprice'))
                            : $t(i18n.global.t('home.offerpricerange'))
                    }}
                </h6>
                <h5>{{ moment(props.data.time).format('YYYY-MM-DD HH:mm') }}</h5>
                <h6>
                    {{
                        props.data.listingDate
                            ? $t(i18n.global.t('home.CommencementofTradeDate'))
                            : $t(i18n.global.t('home.ExpectedPriceDeterminationDate'))
                    }}
                </h6>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
export default {
    name: 'XMain',
};
</script>
<script lang="ts" setup>
import { size } from 'lodash';
import { ref, onMounted, computed, watch } from 'vue'
import { ipoStore } from "@/stores/ipo"
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
import logo from '@/assets/Snipaste.png'
import { useRouter } from 'vue-router';
import Aimage from "./image1/index.vue";
import moment from 'moment';
const { proxy } = (getCurrentInstance() as any)
const store = ipoStore();
const currentDate = ref(new Date())
const expand = ref(false);
const fontstyle = ref()
const router = useRouter()
const detailsItem = ref([
    {
        name: proxy.$t('home.DealInitiated'),
        icon: 0
    },
    {
        name: proxy.$t('home.PublicOfferClosed'),
        icon: 0
    },
    {
        name: proxy.$t('home.ApplicationValidated'),
        icon: 0
    },
    {
        name: proxy.$t('home.AllotmentConfirmed'),
        icon: 0
    }
    , {
        name: proxy.$t('home.MoneySettlement'),
        icon: 0
    },
    {
        name: proxy.$t('home.AllocationConfirmed'),
        icon: 0
    }, {
        name: proxy.$t('home.placingApproved'),
        icon: 0
    }, {
        name: proxy.$t('home.AllotmentResultsApproved'),
        icon: 0
    }, {
        name: proxy.$t('home.TradingStarted'),
        icon: 0
    }
])
const props = defineProps({
    data: {
        type: Object,
        default: function () {
            return {
                HKD: "",
                number: 0,
                price: "",
                time: "",
                title: "",
                trading: "",
                logolinks: "",
                status: 0,
                listingDate: "",
                ipoID: 0,
                tradeCurrency: ""

            }
        }
    }
})

// console.log(props.data.tradeCurrency);

const code22 = ref('')
onMounted(() => {
    setCodefn()
})
watch(props, (newValue: any, oldValue: any) => {
    setCodefn();
}, { deep: true })
const code33 = computed(() => {
    return {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    }[props.data.status as number]
})
const detailsItem33 = computed(() => {
    var tag = true;
    const arr = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 }
        } else if (tag) {
            return { ...item, icon: 1 }
        } else {
            return { ...item, icon: 0 }
        }
    })
    return [
        {
            name: proxy.$t('home.DealInitiated'),
            icon: arr[0].icon
        },
        {
            name: proxy.$t('home.PublicOfferClosed'),
            icon: arr[1].icon
        },
        {
            name: proxy.$t('home.ApplicationValidated'),
            icon: arr[2].icon
        },
        {
            name: proxy.$t('home.AllotmentConfirmed'),
            icon: arr[3].icon
        }
        , {
            name: proxy.$t('home.MoneySettlement'),
            icon: arr[4].icon
        },
        {
            name: proxy.$t('home.AllocationConfirmed'),
            icon: arr[5].icon
        }, {
            name: proxy.$t('home.placingApproved'),
            icon: arr[6].icon
        }, {
            name: proxy.$t('home.AllotmentResultsApproved'),
            icon: arr[7].icon
        }, {
            name: proxy.$t('home.TradingStarted'),
            icon: arr[8].icon
        }
    ]
})
function setCodefn() {
    // console.log('修改了data',newValue,oldValue);
    var obj = {
        25: proxy.$t('home.DealInitiated'),
        30: proxy.$t('home.PublicOfferClosed'),
        35: proxy.$t('home.ApplicationValidated'),
        45: proxy.$t('home.AllotmentConfirmed'),
        50: proxy.$t('home.MoneySettlement'),
        55: proxy.$t('home.AllocationConfirmed'),
        60: proxy.$t('home.placingApproved'),
        65: proxy.$t('home.AllotmentResultsApproved'),
        70: proxy.$t('home.TradingStarted'),
        80: proxy.$t('home.Suspended'),
        90: proxy.$t('home.Cancelled'),
    }
    // console.log('&&&&', props.data.status)
    const stron = props.data.status
    if (isValidKey(stron, obj)) {
        code22.value = obj[stron];
        // console.log('kkkk',stron,obj[stron])
    }
    var tag = true;
    detailsItem.value = detailsItem.value.map(item => {
        if (code22.value == item.name && tag) {
            tag = false;
            return { ...item, icon: 2 }
        } else if (tag) {
            return { ...item, icon: 1 }
        } else {
            return { ...item, icon: 0 }
        }
    })

    // 以下函数解决ts中括号语法obj[stron]读取对象属性的报错
    function isValidKey(
        key: string | number | symbol,
        object: object
    ): key is keyof typeof object {
        return key in object;
    }

}

const cardDetail = (e: any) => {
    e.stopPropagation();
    expand.value = !expand.value;
}
// const cancelPop = (event:any)=>{
//      let tp = document.querySelector(".details")
//      if(tp){
//         if(!tp.contains(event.target)){
//             expand.value = false;
//         }
//      }
// }
//路由传参
const handleclick = (item: any) => {
    localStorage.setItem('ipoID', item.ipoID)
    //console.log(item);
    localStorage.setItem('itemData', JSON.stringify(item))
    router.push({
        name: 'Xdashboard',
        params: { data: JSON.stringify(item) }
    },
    )

}
</script>

<style lang="scss" scoped>
.bigbox {
    width: 280px;
    // height: 360px;
    height: fit-content;
    // min-height: 350px;
    margin-top: 30px;
    margin-left: -10px;
    background-color: #e7efec;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dde2e6;

    .list {
        // height: 150px;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 20px;
        font-family: 'Calibri';

        .list-content {
            margin-top: 10px;
            width: 230px;

            // height: 100%;
            .details {
                .icon1 {
                    margin-left: 3px;
                    transform: translateY(2.5px);
                    cursor: pointer;
                }
            }

            h4 {
                font-size: 20px;
                color: #3b6181;
                margin-bottom: 8px;
                font-weight: 600;
                font-family: 'Calibri';
            }

            h5 {
                font-size: 16px;
                color: #4b6d8a;
                margin-bottom: 8px;
                font-weight: 400;
                font-family: 'Calibri';
            }

            h6 {
                font-size: 12px;
                color: #5e7e98;
                margin-bottom: 8px;
                // font-family: "Calibri";
            }

            .top {
                display: flex;
                justify-content: space-between;
            }
            .el-icon {
                cursor: pointer;
            }

            .icon {
                @media screen and (max-width: 768px) {
                    width: 11rem;
                    height: 13rem;
                }

                width: 11px;
                height: 13px;
                cursor: pointer;
            }
        }
    }
}

// .bigbox:hover {
//     //   background-color: red;
//     box-shadow: 10px 15px 10px #9A9A9A;
// }

@media screen and (max-width: 768px) {
    .bigbox {
        width: 76vw;
        // min-height: 310rem;
        // height: fit-content;

        margin-top: 14px !important;
        cursor: pointer;
    }
}
</style>

<style lang="scss" scoped>
@media (min-width: 768px) and (max-width: 1400px) {
    .bigbox {
        width: calc(100vw / var(--screen) * 280);
        // height: 360px;
        height: fit-content;
        // min-height: 350px;
        // margin-top: calc(100vw / var(--screen) * 30);
        margin-left: calc(100vw / var(--screen) * -10);
        background-color: #e7efec;
        border-radius: calc(100vw / var(--screen) * 20);
        overflow: hidden;
        border: 1px solid #dde2e6;

        .list {
            // height: 150px;
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: calc(100vw / var(--screen) * 20);
            font-family: 'Calibri';

            .list-content {
                margin-top: calc(100vw / var(--screen) * 10);
                width: calc(100vw / var(--screen) * 230);

                // height: 100%;
                .details {
                    .icon1 {
                        margin-left: calc(100vw / var(--screen) * 3);
                        transform: translateY(2.5px);
                        cursor: pointer;
                    }
                }

                h4 {
                    font-size: calc(100vw / var(--screen) * 20);
                    color: #3b6181;
                    margin-bottom: calc(100vw / var(--screen) * 8);
                    font-weight: 600;
                    font-family: 'Calibri';
                }

                h5 {
                    font-size: calc(100vw / var(--screen) * 16);
                    color: #4b6d8a;
                    margin-bottom: calc(100vw / var(--screen) * 8);
                    font-weight: 400;
                    font-family: 'Calibri';
                }

                h6 {
                    font-size: calc(100vw / var(--screen) * 12);

                    margin-bottom: calc(100vw / var(--screen) * 8);
                    // font-family: "Calibri";
                }
                .icon {
                    width: calc(100vw / var(--screen) * 11);
                    height: calc(100vw / var(--screen) * 13);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>